<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS017-评论框案例</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #222;
        color: snow;
    }

    textarea {
        outline: none;
    }

    div.container {
        display: inline-flex;
        flex-direction: column;
        margin: 1em;
        padding: 1em;
        border: 1px solid aliceblue;
    }

    div.comment-editor-box {
        display: inline-flex;
        width: 35rem;
        gap: 1rem;
    }

    div.comment-editor {
        display: flex;
        flex-direction: column;
        gap: .25em;
    }

    div.comment-editor textarea.comment {
        min-width: 30rem;
        max-width: 30rem;
        min-height: 5em;
        max-height: 10em;
        padding: .5em;
        border-radius: .25em;
        border: 1px solid gray;
        background-color: hsl(219, 50%, 10%);
        color: snow;
        transition: 200ms;
    }

    div.comment-editor textarea.comment:focus {
        border: 1px solid cornflowerblue;
    }

    div.comment-editor-box button.submit {
        width: 4rem;
        height: 5em;
        color: snow;
        background-color: cornflowerblue;
        border: none;
        border-radius: .25em;
        transition: 200ms;
    }

    div.comment-editor-box button.submit:hover {
        background-color: hsl(219, 60%, 60%);
    }

    div.comment-editor div.word-count {
        text-align: right;
        font-size: .8em;
        color: gray;
    }

    div.comment-box {
        display: inline-flex;
        gap: 1rem;
        width: 35rem;
        min-height: 8em;
        visibility: hidden;
    }

    div.comment-box img.avatar {
        width: 4rem;
        height: 4rem;
        object-fit: cover;
        border: 1px solid lightgray;
    }

    div.comment-box div.comment-right {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        gap: .5em;
        width: 30rem;
        padding-bottom: .5em;
        border-bottom: 1px dashed gray;
    }

    div.comment-right div.uname {
        font-size: .8em;
        font-weight: bold;
    }

    div.comment-right p.comment {
        flex-grow: 1;
        word-wrap: break-word;
    }

    div.comment-right div.timestamp {
        font-size: .8em;
        color: gray;
    }
</style>

<body>
    <div class="container">
        <div class="comment-editor-box">
            <div class="comment-editor">
                <textarea class="comment" name="comment" id="comment" placeholder="发一条友善的评论"></textarea>
                <div class="word-count">0/200字</div>
            </div>
            <button class="submit">发布<br>评论</button>
        </div>
        <div class="comment-box">
            <img class="avatar" src="assets/icons/noface.jpg" alt="avatar">
            <div class="comment-right">
                <div class="uname">用户名</div>
                <p class="comment">评论内容</p>
                <div class="timestamp">评论时间戳</div>
            </div>
        </div>
    </div>

    <script>
        const commentTextarea = document.querySelector('textarea.comment')
        const commentWordCount = document.querySelector('div.comment-editor div.word-count')
        const commentBox = document.querySelector('div.comment-box')
        const commentText = document.querySelector('div.comment-right p.comment')
        const commentSubmitBtn = document.querySelector('div.comment-editor-box button.submit')
        let wordCountOverflow = false

        commentTextarea.addEventListener('input', updateCommentWordCount)

        commentTextarea.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                //让编辑框失焦，防止继续输入
                this.blur()
                publishComment()
            }
        })

        commentSubmitBtn.onclick = publishComment

        function updateCommentWordCount() {
            const wordCount = commentTextarea.value.length
            commentWordCount.innerHTML = `${wordCount}/200字`

            wordCountOverflow = wordCount > 200
            commentWordCount.style.color = wordCountOverflow ? 'crimson' : 'gray'
        }

        function publishComment() {
            if (wordCountOverflow) return

            const input = commentTextarea.value

            //复位编辑框和字数统计
            commentTextarea.value = ''
            updateCommentWordCount()

            //掐头去尾后，如果不为空则发布
            const comment = input.trim()
            if (!comment) return

            commentBox.style.visibility = 'visible'
            commentText.innerText = comment
        }
    </script>
</body>

</html>